<template>
	<div id="quanju" class="">
		<el-dialog :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false"
			:visible.sync="dialogVisible" width="70%">
			<div slot="title">
				<a href="#" @click="iscn=true" style="color: black;">中文</a> | <a data-toggle="modal" @click="iscn=false"
					style="color: black;" id="English">English</a>
			</div>
			<div id="">
				<div class="modal-body" style="font-size: 14px;" v-if="iscn">
					<p class="alert-link">
						《专业技术职称评审系统许可及服务协议》(以下简称“本协议”)由您与专业技术职称评审系统服务提供方共同缔结，本协议具有合同数力。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制腾讯责任的条款(以下称“免责条款”)、对用户权利进行限制的条款(以下称“限制条款”)、约定争议解决式和同法管辖的条款，
						以及开通或使用某项服务的单独协议。前述免责、限制及争议解决方式和管辖条款可能以黑体加粗、颜色标记或其他合理方式提示您注意，包括但不限于本协议第二条、第三条、第四条、第六条、第九条等相关条款，您对该等条款的确认将可能导致您在特定情况下的被动、
						不便、损失，请您在确认同意本协议之前或在使用专业技术职称评审系统服务之前再次阅读前述条款。</p>
					<p class="alert-link">除非您已阅读并接受本协议所有条款，否则您无权使用腾讯游戏服务。如果您对本协议或专业技术职称评审系统服务有意见或建议，
						可与专业技术职称评审系统客户服务部门联系，我们会给予您必要的帮助。您点击同意、接受或下一步，或您注册、使用专业技术职称评审系统服务均视为您已阅读并同意签署本协议.</p>
					<p class="alert-link">如果您末满18周岁，请在法定监护人的陪同下阅读本协议，并特别注意未成年人使用条款。如您为未成年人法定监护人，希望合理设定孩子娱乐时间，
						培养孩子健康游戏习惯的，可依据相关规则登录专业技术职称评审系统成长守护平台(https:/jiazhang.qq.com/jz/home.html)
						了解相关信息，您使用专业技术职称评审系统成长守护平台的，应遵守该平台上的《专业技术职称评审系统》。</p>
					<strong>—、【定义】</strong>
					<p><strong> 1.1 本协议:</strong>指本协议正文、<strong>《专业技术职称评审系统》</strong>
						《QQ号码规则》《腾讯微信软件许可及服务协议》《微信个人帐号使用规范》《腾讯隐私政策》《腾讯游戏隐私保护指引)》《QQ隐私保护指引)》《微信隐私保护指引》、
						游戏规则及其修订版本。上述内容一经正式发布，即为本协议不可分割的组成部分。本协议同时还包括《网络游戏服务格式化协议必备条款》。</p>
					<p><strong> 1.2 游戏规则:</strong>指腾讯游戏服务提供方不时发布并修订的关于腾讯游戏的用户守则、玩家条例、游戏公告、提示及通知等内容。</p>
					<p><strong> 1.3 专业技术职称评审系统游戏服务提供方:</strong>指向您提供腾讯游戏及其服务的深圳市腾讯计算机系统有限公司，在本协议中简称为“腾讯”。</p>
					<p><strong> 1.4 专业技术职称评审系统︰</strong>
						指由腾讯负责运营的游戏的统称，包括计算机客户端游戏、网页游戏、HTMLS游戏(HS游戏)、移动终端
						游戏、电视端游戏以及其他形式的游戏;腾讯游戏可能以软件形式提供，这种情况下，腾讯游戏还包括该相关软件及相关文档
					</p>
					<p><strong> 1.5 专业技术职称评审系统服务:</strong> 指腾讯向您提供的与游戏相关的各项在线运营服务。</p>
					<p><strong> 1.6 您:</strong> 又称“玩家”或“用户”，指被授权使用腾讯游戏及其服务的自然人。</p>
					<p><strong> 1.7 游戏数据︰</strong> 指您在使用腾讯游戏过程中产生的被服务器记录的各种数据，包括但不限于角色数据、虚拟物品数据、行为日志、购买日志等等数据。</p>
					<p><strong>二、【其他】......</strong></p>
				</div>

				<div class="modal-body" style="font-size: 14px; " v-else>
					<p class="alert-link">《License and Service Agreement for Professional Technical Title Appraisal
						System》 (hereinafter referred to as "This Agreement")
						is entered into by you and the service provider of Professional Technical Title Appraisal
						System, and this Agreement has the force of contract.
						Please carefully read and fully understand the contents of each clause, especially the
						clauses exempting or limiting Tencent's liability
						(hereinafter referred to as "exemption Clause"), the clauses restricting users' rights
						(hereinafter referred to as "Limitation Clause"), the clauses stipulating dispute resolution
						and the same law jurisdiction.
						And separate agreements to open or use a service. The foregoing liability, limitation and
						dispute resolution method and the jurisdiction
						clause may with the bold, bold color tag or other prompts you to pay attention to the
						reasonable way, including but not limited to article 2 of this agreement,
						article 3 and article 4, article 6, article 9 of the related provisions, to you for confirm
						such terms would be likely to lead you to the passive, under certain circumstances
						For inconvenience and loss, please read the foregoing terms again before confirming and
						agreeing to this agreement or before using the professional technical title Evaluation
						system service. </p>
					<p class="alert-link">You have no right to use Tencent Game services unless you have read and
						accepted all terms of this Agreement. If you have any comments or suggestions on this
						Agreement or the professional and technical title Evaluation System service,
						Can contact with professional and technical title appraisal system customer service
						department, we will give you the necessary help. If you click Agree, accept or next, or if
						you register or use the professional and technical title Evaluation System
						service, you are deemed to have read and agreed to sign this Agreement. </p>
					<p class="alert-link">
						If you are under the age of 18, please read this agreement with your legal guardian and pay
						special attention to the terms of use for minors. If you are the legal guardian of a minor
						and wish to set a reasonable entertainment time for your child,
						Cultivate children's health habits, games can be login according to the rules of
						professional and technical titles evaluation system growth guardian platform
						(https:/jiazhang.qq.com/jz/home.html)
						Understand the relevant information. If you use the Growth guard platform of professional
						and technical Title Evaluation System, you should abide by the "Professional and technical
						Title Evaluation System" on the platform.
					</p>
					<strong>One、【definition】</strong>
					<p><strong> 1.1 this protocol:</strong>Refers to the text of this
						agreement、<strong>《Professional and technical title evaluation system》</strong> 《QQ Number
						rule》《Tencent wechat software License and service Agreement》
						《Wechat personal account usage specification》《Tencent privacy Policy》《Tencent game privacy
						protection guidelines》《QQ Privacy Guidelines》《Guidelines on wechat privacy Protection》、
						The rules of the game and their revisions. Once officially released, the above content shall
						be an integral part of this Agreement. This agreement also includes
						《Network game service formatting agreement necessary terms》。</p>
					<p><strong> 1.2 rules of the game:</strong>Refers to the user rules, player regulations, game
						announcements, tips and notices of Tencent games published and revised by Tencent Game
						service provider from time to time 。</p>
					<p><strong> 1.3 Professional and technical title evaluation system game service
							provider:</strong>Shenzhen Tencent Computer System Co., LTD., which provides Tencent
						games and services to you, is referred to as "Tencent" in this Agreement. 。</p>
					<p><strong> 1.4 Professional and technical title evaluation system︰</strong> Refers to all games
						operated by Tencent, including computer client games, web games, HTMLS games (HS games),
						mobile terminal games, TV games and other forms of games; Tencent Games may be
						provided in the form of software, in which case, Tencent Games also includes the relevant
						software and related documents </p>
					<p><strong> 1.5 Professional and technical title assessment system services:</strong> Refers to
						Tencent to provide you with game-related online operation services。</p>
					<p><strong> 1.6 You:</strong> Also referred to as "players" or "users", refers to natural
						persons authorized to use Tencent games and its services。</p>
					<p><strong> 1.7 Game data︰</strong>Refers to all kinds of data recorded by the server generated
						during your use of Tencent games, including but not limited to character data, virtual goods
						data, behavior log, purchase log and so on 。</p>
					<p><strong>Two、【else 】......</strong></p>
				</div>


			</div>


			<span slot="footer" class="dialog-footer">
				<div v-if="iscn">
					<input type="checkbox" v-model="isAgree" required id="cbox"> <a href="##">
						同意并阅读《专业技术职称评审系统用户注册协议》</a>

					<el-button type="primary" :disabled="isAvailable" @click="startDeclare">
						开始申报({{count}})
					</el-button>

				</div>

				<div v-else>
					<input type="checkbox" v-model="isAgree" id="cboxs" required> <a href="##"> Agree and read《User
						registration
						agreement of
						professional and technical title Evaluation System》</a>

					<el-button type="primary" :disabled="isAvailable" @click="startDeclare">To declare({{count}})
					</el-button>

				</div>
			</span>
		</el-dialog>



		<div class="col-md-9" style="margin: 0 12.5%;" id="bdxx">
			<div class="text-center">
				<img src="/img/4-0(1).png" alt="" style="width: 180px; margin-top: 10px;">
				<samp class="h4 alert-link">《专业技术职务任职资格评审表》在线填写</samp>
			</div>
			<div class="psbdiv">
				<h3>个人信息</h3>
				<div class="row inputwh text-center">
					<div style="display:flex;" class="col-md-4">
						<label for="tximg">
							<input type="button" id="btn" value="+">
							<input type="file" @change="showImg" id="tximg" accept=".png, .jpg, .jpeg">
							<img alt="" id="img_id">
						</label>
						<div class="col-md-7" style=" height: 50px; margin: 70px 0px;">
							<samp class="wbred">* </samp><samp>提示</samp> ：支持一寸照片，建议比例宽度3:4 (像素340*490)
						</div>
					</div>

					<div class="col-md-4">
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp><em>姓</em>名:</div>
							<input class="col-md-7" type="text" v-model="personal.name" placeholder="填写身份证姓名">
						</div>
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp><em>性</em>别:</div>
							<input class="col-md-7" type="text" style="height: 27px;" v-model="personal.gender"
								disabled="disabled">

							</input>
						</div>
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp><em>民</em>族:</div>
							<input class="col-md-7" type="text" v-model="personal.nation" placeholder="xx族,例如：汉族">
						</div>
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp><em>年</em>龄:</div>
							<input class="col-md-7" type="text" v-model="personal.age" disabled="disabled">
						</div>
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp> 身体状况 :</div>
							<select class="col-md-7" v-model="personal.fStzk">
								<option>健康</option>
								<option>良好</option>
								<option>疾病</option>
							</select>
						</div>
					</div>
					<div class="col-md-4">
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp>身份证号:</div>
							<input class="col-md-7" type="text" @blur="verifyNumber" v-model="personal.fSfzh"
								placeholder="填写真实身份证号码">
						</div>
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp>曾使用名:</div>
							<input class="col-md-7" type="text" v-model="personal.fCym" placeholder="若无曾用名，则填无">
						</div>
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp>出生日期:</div>
							<input class="col-md-7" type="text" v-model="personal.fCsrq" disabled="disabled">
						</div>
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp>出生地址:</div>
							<input class="col-md-7" type="text" v-model="personal.fCsdz">
						</div>
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp>手机号码:</div>
							<input class="col-md-7" type="text" v-model="personal.fSjh" placeholder="填写常用真实手机号码">
						</div>
					</div>
				</div>
			</div>
			<div class="psbdiv">
				<h3>工作情况</h3>
				<div class="row inputwh">
					<div class="col-md-4">
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp>参加工作时间:</div>
							<input class="col-md-6" type="date" v-model="personal.fCjgzsj">
						</div>
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp> 现从事专业</div>
							<input class="col-md-6" type="text" v-model="personal.fXcszy">
						</div>
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp> 现工作岗位</div>
							<input class="col-md-6" type="text" v-model="personal.fXygzgw">
						</div>

					</div>
					<div class="col-md-4">
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp>工作单位:</div>
							<input class="col-md-7" type="text" v-model="personal.fGzdw" placeholder="有两个及以上单位名称">
						</div>
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp>现有职称:</div>
							<input class="col-md-7" type="text" v-model="personal.fXyzc" placeholder="若初次申报,则填无">
						</div>
					</div>
					<div class="col-md-4">
						<div class="row">
							<div class="col-md-5"><samp class="wbred">* </samp>现有职称取得时间:</div>
							<input class="col-md-6" type="date" v-model="personal.fXyzcqdsj" placeholder="若无现有职称，则不填">
						</div>
						<div class="row">
							<div class="col-md-5"><samp class="wbred">* </samp>现有职称聘任时间:</div>
							<input class="col-md-6" type="date" v-model="personal.fXyzcrpsj" placeholder="若无现有职称，则不填">
						</div>
					</div>

				</div>
				<div style="padding-left: 35px;">
					<div><samp class="wbred">* </samp>工作岗位是否隶测绘局属四川: <input type="radio" name="sc" checked
							v-model="personal.fSfsyscchj" value="是">是<input v-model="personal.fSfsyscchj"
							style="margin-left: 20px;" type="radio" name="sc" value="否">否
					</div>
					<div><samp class="wbred">* </samp>四川测绘局下属单位的申报人是否事业编制:<input type="radio" name="scbz"
							v-model="personal.fSfsybz" checked value="是">
						是<input style="margin-left: 20px;" value="否" type="radio" name="scbz"
							v-model="personal.fSfsybz">否
					</div>
				</div>


			</div>
			<div class="psbdiv">
				<h3>最高学历</h3>
				<div class="row inputwh">
					<div class="col-md-4">
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp> 毕业时间 :</div>
							<input class="col-md-7" type="date" v-model="personal.fBysj">
						</div>
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp><em>学</em>制 :</div>
							<select class="col-md-7" v-model="personal.fXz">
								<option value="四年制">四年制</option>
								<option value="三年制">三年制</option>
							</select>
						</div>
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp><em>学</em>历 :</div>
							<select class="col-md-7" v-model="personal.fXl">
								<option value="博士研究生">博士研究生</option>
								<option value="本科">本科</option>
								<option value="大专">大专</option>
								<option value="中专">中专</option>
							</select>
						</div>
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp><em>学</em>位 :</div>
							<select class="col-md-7" v-model="personal.fXw">
								<option value="博士">博士</option>
								<option value="研究生">研究生</option>
								<option value="本科">本科</option>
							</select>
						</div>
					</div>
					<div class="col-md-4">
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp>毕 业 院 校:</div>
							<input class="col-md-6" type="text" v-model="personal.fByyx">
						</div>
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp>学 历 类 别:</div>
							<select class="col-md-6" v-model="personal.fXllb">
								<option value="全日制">全日制</option>
								<option value="非全日制">非全日制</option>
							</select>
						</div>
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp>学历证书编号:</div>
							<input class="col-md-6" type="text" v-model="personal.fXlzsbh">
						</div>
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp>学历证书编号:</div>
							<input class="col-md-6" type="text" v-model="personal.fXwzsbh">
						</div>
					</div>
					<div class="col-md-4">
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp>所 学 专 业:</div>
							<input class="col-md-6" type="text" v-model="personal.fSxzy">
						</div>
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp>非全日制说明:</div>
							<select class="col-md-6" v-model="personal.fFqrzsm">
								<option>电大</option>
								<option>无</option>
							</select>
						</div>
					</div>
				</div>
			</div>
			<div class="psbdiv nav">
				<h3>申报信息</h3>
				<div class="row inputwh">
					<div class="col-md-5">
						<div><samp class="wbred">* </samp>是否提前申报:
							<input type="radio" name="tq" v-model="personal.fSftqsb" checked value="是">是
							<input style="margin-left: 20px;" type="radio" v-model="personal.fSftqsb" name="tq"
								value="否">否
						</div>
						<div><samp class="wbred">* </samp>是否破格申报:<input type="radio" name="pg" value="是"
								v-model="personal.fSfpgsb" checked>是<input style="margin-left: 20px;" type="radio"
								v-model="personal.fSfpgsb" name="pg" value="否">否
						</div>
						<div><samp class="wbred">* </samp>拟申报专业技术职务等级:
							<input type="radio" name="dj" v-model="personal.fNsbzyjszwdj" checked value="初级">初级<input
								style="margin-left: 20px;" type="radio" name="dj" v-model="personal.fNsbzyjszwdj"
								value="中级">
							中级<input style="margin-left: 20px;" type="radio" name="dj" value="高级"
								v-model="personal.fNsbzyjszwdj">高级
						</div>
					</div>
					<div class="col-md-4"></div>
					<div class="col-md-4">
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp>拟申报职称:</div>
							<select class="col-md-6" v-model="personal.fNsbzc">
								<option value="技术员">技术员</option>
								<option value="非技术员">非技术员</option>
							</select>
						</div>
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp>申 报 专 业</div>
							<select class="col-md-6" v-model="personal.fSbzy">
								<option value="地理国情检测">地理国情检测</option>
								<option value="非地理国情检测">非地理国情检测</option>
							</select>
						</div>
					</div>
				</div>
				<div class="inputwh">
					<div><samp class="wbred">&nbsp; * </samp>专业技术职务任职资格: <br>
						<i style="color:gray; font-size: 14px; margin-left:30px;">(取得时间及审批机关)</i><br>
						<input class="col-md-11 sbinput" type="text" v-model="personal.fZyjszwrzzg">
					</div>
					<div>
						<div class="col-md-4"><samp class="wbred"> * </samp>现（兼）任行政职务及任职时间:</div>
						<input class="col-md-11 sbinput" type="text" v-model="personal.fXrzsj">
					</div>
					<div>
						<div class="col-md-4"><samp class="wbred"> * </samp>何时加入中国共产党（共青团）任何职务:</div>
						<input class="col-md-11 sbinput" type="text" v-model="personal.fHsrt">
					</div>
					<div>
						<div class="col-md-4"><samp class="wbred"> * </samp>何时何地参加何种民主党派任何职务:</div>
						<input class="col-md-11 sbinput" type="text" v-model="personal.fHshdcjmzdp">
					</div>
					<div>
						<div class="col-md-4"><samp class="wbred"> * </samp>参加何种学术团体、任何种职务有何社会兼职:</div>
						<input class="col-md-11 sbinput" type="text" v-model="personal.fCjxstirhzwu">
					</div>
					<div>
						<div class="col-md-12"><samp class="wbred"> * </samp>懂何种外语达到何种程度:</div>
						<br>
						<div class="col-md-4"><i
								style="color:gray; font-size: 12px; margin-left:10px;">(写明掌握外语的读、写、听说及笔、口译能力)</i>
						</div>
						<input class="col-md-11 sbinput" type="text" v-model="personal.fDhzwy">
					</div>
				</div>
			</div>
			<div class="psbdiv">
				<h3>单位查验人</h3>
				<div class="row inputwh">
					<div class="col-md-4">
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp> <em>姓</em>名:</div>
							<input class="col-md-8" type="date" v-model="personal.dName">
						</div>
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp> 电子邮箱:</div>
							<input class="col-md-8" type="text" v-model="personal.dEmail">
						</div>
					</div>
					<div class="col-md-4">
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp>手机号码:</div>
							<input class="col-md-8" type="text" v-model="personal.dPhone">
						</div>
					</div>
					<div class="col-md-4">
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp>固定号码:</div>
							<input class="col-md-7" type="text" v-model="personal.dGddh">
						</div>
					</div>
				</div>
			</div>
			<div class="psbdiv">
				<h3>其他信息</h3>
				<div class="row inputwh">
					<div class="col-md-4">
						<div><samp class="wbred">* </samp>本人是否是会员: <input type="radio" checked name="hy" value="是"
								v-model="personal.fSfhy">是<input style="margin-left: 20px;" type="radio" name="hy"
								v-model="personal.fSfhy" value="否">否
						</div>
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp>材料编号 :</div>
							<input class="col-md-8" type="text" v-model="personal.fClbh">
						</div>
					</div>
					<div class="col-md-4">
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp>填报单位:</div>
							<input class="col-md-7" type="text" v-model="personal.fTbdw">
						</div>
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp>推荐单位或地区:</div>
							<input class="col-md-7" type="text" placeholder="与《专业技术职务任职资格评审表》"
								v-model="personal.fUjdwhdq">
						</div>
					</div>
					<div class="col-md-4">
						<div class="row">
							<div class="col-md-4"><samp class="wbred">* </samp>填报时间:</div>
							<input class="col-md-7" type="text" placeholder="默认初始化为当前时间">
						</div>
					</div>
				</div>
			</div>
			<div>
				<p style="color: red;">
					<strong>重要提醒:申报人按照填报说明认真填写，查验人仔细核对，如果因为信息错误导致申报资格核验不符合，责任自负。填完下载此表，单位查验材料人查验后，盖章确认。</strong>
				</p>
				<p>
					<strong>填报说明:</strong><br>
					1.本页标注<samp class="wbred"> * </samp>的内容必须填写，且汉字之间不要有空格<br>
					2.<samp class="wbred">请填写真实有效信息，并注意准确性</samp><br>
					3.头像上传直接点击“+”符号，上传即可<br>
					4.“专业技术职务任职资格（(取得时间及审批机关)”、“现(兼)任行政职务及任职时间”、“何时加入中国共产党(共青团)任何职务”、
					“何时何地参加何种民主党派任何职务”、“参加何种学术团体、任何种职务有何社会兼职”、“懂何种外语达到何种程度”字数在75字以内
				</p>

				<div class="text-center" id="xyb">
					<button type="button" class="btn btn-primary">预览</button>
					<button type="button" class="btn btn-primary">下载</button>
					<button type="button" class="btn btn-primary">保存</button>
					<button type="button" class="btn btn-primary" @click="nextStep">保存并下一步</button>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	import $ from "jquery"

	export default {
		name: "Evaluationtable",
		data() {
			return {
				dialogVisible: true,
				isAgree: false, //同意条款
				isAvailable: true, //按钮控制
				count: 10, //倒计时
				iscn: true, //中英切换
				verPhoto: false, //头像验证，
				file: null, //头像文件
				personal: {
					name: "", //姓名
					gender: "男", //性别
					nation: "", //民族
					age: "", //年龄
					fStzk: "健康", //身体状况
					fSfzh: "", //身份证号
					fCym: "", //曾用名
					fCsrq: "", //出生日期
					fCsdz: "", //出生地址
					fZp: "", //照片
					fSjh: "", //手机号
					fCjgzsj: "", //参加工作时间
					fGzdw: "", //工作单位
					fXyzcqdsj: "", //现有职称取得时间
					fXcszy: "", //现从事专业
					fXyzc: "", //现有职称
					fXyzcrpsj: "", //现有职称聘任时间
					fXygzgw: "", //现有工作岗位
					fSfsyscchj: "否", //工作单位是否隶属于四川测绘局
					fSfsybz: "否", //四川测绘局下属单位的申报人是否事业编制
					fBysj: "", //毕业时间
					fByyx: "", //毕业院校
					fSxzy: "", //所学专业
					fXz: "三年制", //学制
					fXllb: "全日制", //学历类别
					fFqrzsm: "无", //非全日制说明
					fXl: "本科", //学历
					fXlzsbh: "", //学历证书编号
					fXw: "本科", //学位
					fXwzsbh: "", //学位证书编号
					fSftqsb: "否", //是否提前申报
					fNsbzc: "技术员", //拟申报职称
					fSfpgsb: "否", //是否破格申报
					fSbzy: "地理国情检测", //申报专业
					fNsbzyjszwdj: "初级", //拟申报专业技术职务等级
					fZyjszwrzzg: "", //专业技术职务任职资格
					fXrzsj: "", //现（兼）任行政职务及任职时间
					fHsrt: "", //何时加入中国共产党（共青团）任何职务
					fHshdcjmzdp: "", //何时何地参加何种民主党派任何职务
					fCjxstirhzwu: "", //参加何种学术团体、任何种职务有何种社会兼职
					fDhzwy: "", // 懂何种外语达到何种程度
					dName: "", // 单位查验人姓名
					dPhone: "", //单位查验手机号
					dGddh: "", //单位查验固定电话
					dEmail: "", //单位检验人电子邮箱
					fSfhy: "否", //本人是否是会员
					fTbdw: "", //填报单位
					fClbh: "", //材料编号
					fUjdwhdq: "", //推荐单位或地区
					fUserId: "", //上传用户
				},
			}
		},
		created() {
			this.countdown();
		},
		computed: {
			//表单验证
			verifyFrom() {
				//身份正则
				let perID = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
				//手机号正则
				let perPhone = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
				//邮箱正则
				let perEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/


				//姓名验证
				if (!/^[\u4E00-\u9FA5]{2,4}$/.test(this.personal.name)) {
					return {
						flag: false,
						msg: '请输入正确的姓名'
					}
				}
				if (this.personal.natio === "") {
					return {
						flag: false,
						msg: '请输入民族'
					}
				}

				if (!perID.test(this.personal.fSfzh)) {
					return {
						flag: false,
						msg: '请输入正确的身份证号'
					}
				}

				if (this.personal.fCym === "") {
					return {
						flag: false,
						msg: '请输入曾用名，没有则输入无'
					}
				}
				if (!perPhone.test(this.personal.fSjh)) {
					return {
						flag: false,
						msg: '请输入正确的个人手机号'
					}
				}
				if (this.personal.fCjgzsj === '') {
					return {
						flag: false,
						msg: '请输入的参加工作的时间'
					}
				}
				if (this.personal.fGzdw === '') {
					return {
						flag: false,
						msg: '请输入工作单位'
					}

				}
				if (this.personal.fXyzcqdsj === '') {
					return {
						flag: false,
						msg: '请输入现有职称取得时间'
					}

				}
				if (this.personal.fXcszy === '') {
					return {
						flag: false,
						msg: '请输入从事专业'
					}

				}
				if (this.personal.fXyzc == "") {
					return {
						flag: false,
						msg: '请输入现有职称'
					}
				}

				if (this.personal.fXyzcrpsj == "") {
					return {
						flag: false,
						msg: '请输入现有职称任聘时间'
					}
				}
				if (this.personal.fXygzgw == "") {
					return {
						flag: false,
						msg: '请输入现有工作岗位'
					}
				}

				if (this.personal.fBysj == "") {
					return {
						flag: false,
						msg: '请输入毕业时间'
					}
				}
				if (this.personal.fByyx == "") {
					return {
						flag: false,
						msg: '请输入毕业院校'
					}
				}
				if (this.personal.fSxzy == "") {
					return {
						flag: false,
						msg: '请输入所学专业'
					}
				}
				if (this.personal.fXlzsbh == "") {
					return {
						flag: false,
						msg: '请输入学历证书编号'
					}
				}

				if (this.personal.fXwzsbh == "") {
					return {
						flag: false,
						msg: '请输入学位证书编号'
					}
				}
				if (this.personal.fNsbzc == "") {
					return {
						flag: false,
						msg: '请输入申报职称'
					}
				}
				if (this.personal.fZyjszwrzzg == "") {
					return {
						flag: false,
						msg: '请输入专业技术职务任职资格'
					}
				}
				if (this.personal.fXrzsj == "") {
					return {
						flag: false,
						msg: '请输入现有职务任职时间'
					}
				}

				if (this.personal.fHsrt == "") {
					return {
						flag: false,
						msg: '请填写何时加入党（共青团）任何种职务'
					}
				}
				if (this.personal.fHshdcjmzdp == "") {
					return {
						flag: false,
						msg: '请填写何时何地任党派职务'
					}
				}
				if (this.personal.fCjxstirhzwu == "") {
					return {
						flag: false,
						msg: '请填写参加何种学术团体、任何种职务有何种社会兼职'
					}
				}
				if (this.personal.fDhzwy == "") {
					return {
						flag: false,
						msg: '请填写外语程度'
					}
				}
				if (this.personal.dName == "") {
					return {
						flag: false,
						msg: '请填写单位查验人姓名'
					}
				}
				if (!perPhone.test(this.personal.dPhone)) {
					return {
						flag: false,
						msg: '请填写正确的单位查验人手机号'
					}
				}
				if (!/^\d{3}-\d{7,8}|\d{4}-\d{7,8}$/.test(this.personal.dGddh)) {
					return {
						flag: false,
						msg: '请填写正确的查验固定电话'
					}
				}
				if (!perEmail.test(this.personal.dEmail)) {
					return {
						flag: false,
						msg: '请填写正确的查验人邮箱号'
					}
				}
				if (this.personal.fTbdw === "") {
					return {
						flag: false,
						msg: '请输入填报单位'
					}
				}
				if (this.personal.fUjdwhdq == "") {
					return {
						flag: false,
						msg: '请输入推荐单位和地区'
					}
				}
				if (this.personal.fClbh == "") {
					return {
						flag: false,
						msg: '请输入材料编号'
					}
				}
				if (!this.verPhoto) {
					return {
						flag: false,
						msg: '请选择个人照片'
					}
				}


				return {
					flag: true
				}



			}



		},

		methods: {

			//验证身份证号并且截取出生日期与年龄
			verifyNumber() {

				let perID = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
				let year, month, date, gender;
				let IdNum = this.personal.fSfzh
				if (!perID.test(IdNum)) {
					this.$message.warning("请输入正确的身份证号")
				} else {

					if (IdNum.length == 18) {
						year = IdNum.substring(6, 10);
						month = IdNum.substring(10, 12);
						date = IdNum.substring(12, 14);
						gender = IdNum.substring(16, 17)

					} else {
						year = "19" + IdNum.substring(6, 8);
						month = IdNum.substring(8, 10);
						date = IdNum.substring(10, 12);
						gender = IdNum.substring(14)

					}

					this.personal.fCsrq = year + "-" + month + "-" + date;
					this.personal.age = this.jsGetAge(this.personal.fCsrq)
					this.personal.gender = parseInt(gender) % 2 == 0 ? '女' : '男';
				}

			},

			//年龄计算
			jsGetAge(strBirthday) {
				var returnAge;
				// 根据生日计算年龄（"1995-09-25"）
				//以下五行是为了获取出生年月日，如果是从身份证上获取需要稍微改变一下
				var strBirthdayArr = strBirthday.split("-");
				var birthYear = strBirthdayArr[0];
				var birthMonth = strBirthdayArr[1];
				var birthDay = strBirthdayArr[2];

				var d = new Date();
				var nowYear = d.getFullYear();
				var nowMonth = d.getMonth() + 1;
				var nowDay = d.getDate();

				if (nowYear == birthYear) {
					returnAge = 0; //同年 则为0岁
				} else {
					var ageDiff = nowYear - birthYear; //年之差
					if (ageDiff > 0) {
						if (nowMonth == birthMonth) {
							var dayDiff = nowDay - birthDay; //日之差
							if (dayDiff < 0) {
								returnAge = ageDiff - 1;
							} else {
								returnAge = ageDiff;
							}
						} else {
							var monthDiff = nowMonth - birthMonth; //月之差
							if (monthDiff < 0) {
								returnAge = ageDiff - 1;
							} else {
								returnAge = ageDiff;
							}
						}
					} else {
						returnAge = -1; //返回-1 表示出生日期输入错误 晚于今天
					}
				}

				return returnAge; //返回周岁年龄

			},

			//申报开始
			startDeclare() {
				console.log(this.isAgree)
				if (!this.isAgree) {
					this.$message.warning("请阅读条款并同意")
					return

				}
				this.dialogVisible = false
			},
			//确认按钮倒计时
			countdown() {
				let that = this
				let countInter = window.setInterval(function() {
					that.count = that.count - 1;
					if (that.count <= 0) {
						that.isAvailable = false
						window.clearInterval(countInter); //清除定时器
						return
					}

				}, 1000)
			},


			//上传图片并展示
			showImg: function() {
				let that = this
				var file = document.getElementById('tximg').files[0];
				console.log(file)
				var re = new FileReader();
				re.readAsDataURL(file);
				re.onload = function(e) {
					var data = e.target.result;
					//加载图片获取图片真实宽度和高度
					var image = new Image();
					image.onload = function() {
						var width = image.width;
						var height = image.height;
						if (width !== 340 || height != 490) {
							that.$message.warning('请上传340*490的个人寸照');
						} else {
							that.verPhoto = true
							$('#img_id').attr('src', data)
						}
					};
					image.src = data;



				}
			},
			save() {
				//表单验证
				if (!this.verifyFrom.flag) {
					this.$message.warning(this.verifyFrom.msg)
					return
				}
				let that = this
				let from = new FormData();
				let file = document.getElementById('tximg').files[0];
				from.append('file', file)

				//上传个人图片
				that.$http.post("user/photo", from, {
					headers: {
						"Content-Type": "multipart/form-data boundary=" + new Date().getTime()
					}
				}).then(res => {
					that.personal.fZp = res.data
					//上传资料
					that.$http.post("/review/add", that.personal).then(res => {
						that.$message.success("上传成功")
						that.$router.push({path:'/study'})

					})
				})
			},

			//保存下一步
			nextStep() {
                 this.save();
				 



			},
		},
		mounted() {



		}
	}
</script>

<style scoped>
	#bdxx .inputwh em {
		letter-spacing: 35px;
	}

	#bdxx .inputwh {
		margin-left: 20px;
	}

	#bdxx .inputwh div,
	#bdxx .inputwh select {
		margin-top: 6px;
	}

	#btn {
		height: 200px;
		line-height: 170px;
		width: 150px;
		font-size: 60px;
	}

	#bdxx .inputwh #tximg {
		height: 200px;
		line-height: 170px;
		width: 150px;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
	}

	#bdxx h3 {
		margin-top: 20px;
		margin-bottom: 30px;
		margin-left: 30px;
	}

	#bdxx .wbred {
		color: red;
	}

	#bdxx .sbinput {
		margin-left: 20px;
		height: 60px;
	}

	#bdxx .psbdiv {
		border-radius: 10px;
		margin-bottom: 30px;
		padding-bottom: 20px;
		box-shadow: 0px 0px 10px rgb(211, 210, 210);
		border: 1px solid rgb(211, 210, 210);
	}

	#bdxx #xyb button {
		margin-right: 20px;
		margin-top: 20px;
		margin-bottom: 50px;
	}

	#img_id {
		position: absolute;
		left: 15px;
		top: 0;
		width: 150px;
		height: 200px;
	}

	input {
		outline: none;
	}

	select {
		outline: none;
		height: 24px;
		line-height: 20px;
	}
</style>
